<template>
<div class="Remakepassword_container">
  <Form ref="formInline" :model="formInline" :rules="ruleInline">
    <FormItem prop="user">
      <Input type="text" v-model="formInline.user" placeholder="用户名">
        <template #prepend>
          <Icon type="ios-person-outline"></Icon>
        </template>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="formInline.password" placeholder="密码">
        <template #prepend>
          <Icon type="ios-lock-outline"></Icon>
        </template>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input
        type="password"
        v-model="formInline.new_password"
        placeholder="新密码"
      >
        <template #prepend>
          <Icon type="ios-lock-outline"></Icon>
        </template>
      </Input>
    </FormItem>
    <FormItem style="text-align: center">
      <Button @click="handleSubmit('formInline')">确认修改</Button>
    </FormItem>
  </Form>
</div>
</template>
<script>
import { remake_password } from '@/api/API_sign_in_out'
export default {
  data() {
    return {
      formInline: {
        user: '',
        password: '',
        new_password: ''
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: '请填写用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请填写密码',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 4,
            message: '密码长度不能小于4位',
            trigger: 'blur'
          }
        ],
        new_password: [
          {
            required: true,
            message: '请填写密码',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 4,
            message: '密码长度不能小于4位',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (
            this.formInline.user.length == 0 ||
            this.formInline.new_password.length < 4 ||
            this.formInline.password.length < 4
          ) {
            this.$Notice.error({desc:'输入不合法!'})
            return
          }

          remake_password(
            this.formInline.user,
            this.formInline.password,
            this.formInline.new_password,
            ({ data: res }) => {
              if (res.ret != 0) {
                this.$Notice.error({desc:'修改失败:' + res.msg})
              } else {
                this.$Notice.success({desc:'修改成功,请重新登录'})
                this.$router.replace('/login')
              }
            }
          )
        } else {
          this.$Notice.error({desc:'输入不合法!'})
        }
      })
    }
  }
}
</script>

<style scoped>
.Remakepassword_container{
  margin: 10px;
}
</style>
